<template>
  <div style="position: relative">
    <rotate v-if="showPan && closePrize" @StopRotate="StopRotate"></rotate>
    <div v-if="!closePrize" class="take">
      <span class="prize">{{ prize }}</span>
      <span class="code">{{ code }}</span>
    </div>
    <div class="close" @click="handleClose">X</div>
  </div>
</template>

<script>
import Rotate from './Rotate'
import CryptoJS from 'crypto-js'
import uuidv1 from 'uuid/v1'

export default {
  name: 'Pan',
  components: { Rotate },
  props: {
    showPan: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {
      prize: '',
      closePrize: true,
      code: ''
    }
  },
  methods: {
    handleClose () {
      this.closePrize = true
      this.$emit('handleClose')
    },
    StopRotate (index) {
      this.closePrize = false
      // this.prize = index

      if (index === '0') {
        this.prize = '很遗憾，什么都没中'
      } else {
        this.code = `特征码：${CryptoJS.AES.encrypt(`${uuidv1()}:${index}`, 'secret key 123').toString()}`
        this.prize = `恭喜您获得： ${index} , 赶紧复制特征码找管理换取奖品`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.close {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #F56C6C;
  background: #F56C6C;
  line-height: 30px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.take {
  /*line-height: 200px;*/
  width: 500px;
  color: #67C23A;
  font-size: 40px;
  text-align: center;
  background-color: #23272b;
  border-radius: 12px;
  word-break: break-all;
  padding-top: 40px;
  padding-bottom: 20px;
  .prize {

  }
  .code {
    display: block;
    font-size: 16px;
    margin: 10px;
  }
}
</style>
